<template>
    <div class="nav_left" v-if="store.menu.length>0">
            <el-menu :default-active="route.path" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
                @close="handleClose" :router="true" :default-openeds="openeds">
                <div v-for="(item, index) in store.menu" :key="index">
                    <el-sub-menu v-if="item.children.length > 0" :index="item.path">
                        <template #title>
                            <span>{{ item.permission_name}}</span>
                        </template>
                        <el-menu-item-group>
                            <template v-for="(item_twe, i) in item.children" :key="i" >
                                <el-menu-item :index="item_twe.path.trim()" @click="goNav(item_twe.path.trim())" > {{item_twe.permission_name}}</el-menu-item>
                            </template>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item :index="item.path.trim()" v-if="item.children.length==0" @click="goNav(item.path.trim())">
                        <template #title>{{ item.permission_name}}</template>
                    </el-menu-item>
                </div>
            </el-menu>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import router from "@/router/index.ts"
import {useRoute} from "vue-router"
import { userInforStore } from '@/stores/user'
const store:any = userInforStore()
const route = useRoute()
// 刷新白名单
const load = ["/information/manage","/search","/task"]
// 定义不显示左侧nav的一级路由
const whitelist = ["/login","/forgot"]
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
function goNav(item:any) {
    // openeds.value = item_twe
    console.log(item,"item");
    
    // router.push(item)
    location.href = item
    // if(load.includes(item)){
    //     let timer =  setTimeout(() => {
    //         location.reload()
    //         clearTimeout(timer)
    //     }, 500);
    // }
}
console.log(router, "routerouteroute");
let openeds = ref([route.meta.path])
onMounted(()=>{
    console.log(store.menu,"menumenumenumenumenu");
})
</script>
  
<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: calc(100vh - 50px);
    // background: rgba(24, 145, 255, 1);
}
:deep(.el-menu-item){
    color: #303133;
    font-size:14px ;
    &:hover{
        // background: rgba(71, 163, 247, 1);
		background:#EDF5FF;
    }
}
:deep(.is-active){
    color: #409eff;
    background-color: #EDF5FF;
}
:deep(.el-sub-menu__title){
    &:hover{
        // background: rgba(71, 163, 247, 1);
		background:#EDF5FF;
    }
    span{
        color: #303133;
        font-size:14px ;
    }
}
:deep(.el-sub-menu .el-menu-item){
    font-size:14px ;
}
:deep(.el-menu){
    // background: rgba(24, 145, 255, 1);
}
.nav_left{
    height: 100%;
}
:deep(.el-menu-item-group__title){
    padding: 0;
}
</style>
  